import {
  StyleSheet,
  ImageBackground,
  Text,
  FlatList,
  ToastAndroid,
  BackHandler,
  View,
  Image,
  Button,
  Modal,
  TextInput,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Platform,
  Share,
  Animated
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './pages/Home';
import Detail from './pages/Detail';
import User from './pages/User';

const HomeScreen = () => (
  <Stack.Navigator
    screenOptions={
      {
        headerStyle: {
          backgroundColor: '#ccc'
        },
        headerTitleAlign: 'center',
        headerTintColor: 'red',
      }
    }>
    <Stack.Screen
      name='Home' component={Home}
      options={
        {
          title: '首页',
        }
      }
    />
    <Stack.Screen
      name='Detail'
      component={Detail}
      options={
        ({ route }) => ({
          title: route.params.id
        })
      }
    />
  </Stack.Navigator>
)
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={
          {
            headerStyle: {
              backgroundColor: '#ccc'
            },
            headerTitleAlign: 'center',
            headerTintColor: 'red',
            tabBarActiveTintColor: 'red',
            // tabBarActiveBackgroundColor: '#ccc'
            // tabBarLabelStyle: {fontSize: 16}
            tabBarStyle: {backgroundColor: '#ccc'}
          }
        }
      >
        <Tab.Screen
          options={{
            headerShown: false,
            title: '首页',
            tabBarIcon: ({color,size})=>(
              <AntDesign 
                name='home' 
                color={color} 
                size={size}
              />
            )
          }}
          name='Root'
          component={HomeScreen}
        />
        <Tab.Screen
          options={{
            title: '用户中心',
            tabBarIcon: ({color,size})=>(
              <AntDesign 
                name='user' 
                color={color} 
                size={size}
              />
            )
          }}
          name='User'
          component={User}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
